<!-- 精选页面 -->
<template>
  <div class="sift">
    <RollbackBarView :to="'/'" :title="'精选'" />
    <div class="sift-banner">
      <img src="http://192.168.27.59/imgs/siftbanner/siftBanner.png" alt="" />
    </div>
    <div class="sift-rec">
      <div class="rec-title">本周推荐</div>
      <div class="rec-list">
        <router-link
          tag="div"
          :to="`/goodsdetail/${item.id}`"
          class="list-item"
          v-for="item in recList"
          :key="item.id"
        >
          <div class="item-img">
            <img :src="item.img" alt="" />
          </div>
          <div class="item-title two-line">{{ item.title }}</div>
        </router-link>
      </div>
    </div>
    <BtmNavView />
  </div>
</template>

<script>
import BtmNavView from "@/components/BtmNavView.vue";
import RollbackBarView from "@/components/RollbackBarView.vue";
import { getSiftList } from "@/api/inedx";
export default {
  data() {
    return {
      recList: [],
    };
  },
  methods: {
    async getRecList() {
      let { data } = await this.$http(getSiftList());
      this.recList = data.data;
    },
  },
  mounted() {
    this.getRecList();
  },
  components: { BtmNavView, RollbackBarView },
};
</script>

<style lang="scss" scoped>
.sift {
  width: 100vw;
  min-height: 100vh;
  .sift-banner {
    width: 100%;
    background-color: #fff;
    max-height: 40vmin;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .sift-rec {
    margin: 0.625rem 0;
    background-color: #fff;
    .rec-title {
      text-align: center;
      width: 100vw;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .rec-list {
      width: 100%;
      display: flex;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .list-item {
        width: 40vw;
        margin-right: 0.625rem;
        padding: 0.625rem 0;
        .item-img {
          img {
            width: 40vw;
          }
        }
        .item-title {
          font-size: 14px;
          margin: 0.375rem 0;
          line-height: 18px;
        }
      }
    }
  }
}
</style>
